<template>
	<div class="page">
		<mt-header title="竞价明细">
			<router-link to="" slot="left">
				<img class="back" :src="staticImgData.back" @click="$router.back(-1)" alt="">
			</router-link>
			<router-link to="/bid/bidRecord" slot="right">
				<mt-button>出价记录</mt-button>
			</router-link>
		</mt-header>
		<div class="box-con">
			<div class="list-state">{{endTime ? '还剩'+endTime : '已失效'}}</div>
			<div class="clearfix">
				<div class="list-type">{{detailDesti ? detailDesti.inquirySheetNo : ''}}</div>
				<div class="list-address">
					<p>{{detailDesti ? detailDesti.originLocationCity : ''}}</p>
					<div class="img">
						<img class="car" :src="staticImgData.car" alt="">
						<img class="line" :src="staticImgData.line" alt="">
					</div>
					<p>{{detailDesti ? detailDesti.destLocationCity : ''}}</p>
				</div>
				<div class="list-con gap-bottom detail-qua">
					<div class="list-detail">
						<div class="list-text detail-time">
							<p>商品车数量：</p>
							<div class="list-jump" @click="carList">{{detailDesti ? detailDesti.totalShipCount : ''}}(台)<img class="img-detail" :src="staticImgData.detail" alt=""></div>
						</div>
						<div class="list-text detail-time">
							<p>竞价时间：</p>
							<p>{{detailDesti ? detailDesti.competitionTime : ''}}</p>
						</div>
					</div>
				</div>
				<div class="list-con gap-bottom">
					<div class="list-detail">
						<p class="detail-remark"><span>备注：</span>{{detailDesti ? detailDesti.remarks : ''}}</p>
					</div>
				</div>
				<div class="list-con" v-show="text=='出价'">
					<div class="list-mark">
						<p class="list-num">当前竞价</p>
					</div>
					<div v-show="!detailList" class="f14 pad15 c-666 noInfo">
						暂无竞价信息
					</div>
					<div class="list-detail" v-show="detailList">
						<div class="list-text">
							<p>出价次数：</p>
							<p>{{detailList ? detailList.bidCount : ''}}次</p>
						</div>
						<div class="list-text">
							<p>当前排名：</p>
							<p>{{detailList ? detailList.currentRanking : ''}}</p>
						</div>
						<div class="list-text">
							<p>当前出价：</p>
							<p>{{detailList ? detailList.bidPrice : ''}}元</p>
						</div>
					</div>
				</div>
				<div class="list-con list-border" v-show="text=='确认出价'">
					<p class="list-all">我的总出价</p>
					<div class="price list-input">
						<span class="money">¥</span>
						<input
						label="¥"
						placeholder=""
						type="number"
						v-model="value"
						@input="onChange"
						@focus="onFocus"
						@blur="onBlur"
						/>
						<img v-show="value && isFocus" @click="close" class="closeImg" :src="staticImgData.close" alt="">
					</div>
					<div class="border-top"></div>
				</div>
				<x-button
				type="primary"
				class="custom-primary"
				:disabled="isDisable"
				action-type="button"
				@click.native="winbidPlan"
				:text="text">
				</x-button>
				<div class="radioList" v-show="text=='确认出价'">
					<v-checklist
						v-model="checklist001"
						:options="commonList"
						@change="change"
					>
					</v-checklist>
					<div class="state-text" @click="jumpState">《运力招投标规则申明》</div>
				</div>
			</div>
		</div>
		<v-loading v-show="loadingShow"></v-loading>
	</div>
</template>

<script>
	import { XButton, Group, XInput } from 'vux'
	import { Header, Toast, Checklist } from 'mint-ui'
	import Loading from '@/components/common/loading/loading'
	import * as BidApi from '@/api/bid'
	import * as ThreeStorage from '@/utils/store/token.js'
	export default {
	  name: 'bid-list',
	  data() {
	    return {
	      loadingShow: false,
	      staticImgData: {
	        bg: require('@/assets/image/v1/bid/bg@2x.png'),
	        back: require('@/assets/image/v1/bid/back@2x.png'),
	        car: require('@/assets/image/v1/bid/car@2x.png'),
	        line: require('@/assets/image/v1/bid/line@2x.png'),
	        detail: require('@/assets/image/v1/bid/detail@2x.png'),
	        close: require('@/assets/image/v1/bid/close@2x.png')
	      },
	      value: '',
	      isDisable: false,
	      text: '出价',
	      detailDesti: '', // 始发地、目的地等
	      detailDestiParam: {
	        condition: {
	          queryFlag: '',
	          bidPartyCode: ThreeStorage.getCarInfo().currentFleetId, // 车队id
	          id: ThreeStorage.getDealListInfo().id// 询价单ID
	        }
	      },
	      detailList: '',
	      detailListParam: {
	        serviceProviderGid: ThreeStorage.getCarInfo().currentFleetId, // 车队ID
	        inquirySheetId: ThreeStorage.getDealListInfo().id, // 询价单ID
	        priceDetailFlag: 'one'// 查询类型
	      },
	      OfferPrice: {
	        serviceProviderGid: ThreeStorage.getCarInfo().currentFleetId, // 车队ID
	        bidPrice: '', // 出价
	        serviceProviderName: ThreeStorage.getCarInfo().fleetName, // 车队名称
	        remark: '', // 备注
	        serviceProviderPhone: ThreeStorage.getCarInfo().phone, // 车队电话
	        inquirySheetId: ThreeStorage.getDealListInfo().id// 询价单ID
	      },
	      endTime: '', // 竞价结束时间
	      commonList: ['已阅读并同意'],
	      checklist001: [],
	      isFocus: false
	    }
	  },
	  components: {
	    Header, XButton, Group, XInput,
	    'v-checklist': Checklist,
	    'v-loading': Loading
	  },
	  created() {
	    // 获取始发地等信息
	    this.getDetailDesti()
	    // 获取排名等信息
	    this.getDetail()
	  },
	  methods: {
	    getDetailDesti() {
	      this.loadingShow = true
	      BidApi.getDealList(this.detailDestiParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.detailDesti = res.data.records[0]
	          // 倒计时
	          const bidTime = res.data.records[0].competitionTime
	          const timeLine = bidTime.split(' ')[0] + bidTime.substr(17, 21)
	          this.countDown(timeLine)
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    getDetail() {
	      this.loadingShow = true
	      BidApi.getDetailOrRecord(this.detailListParam).then(res => {
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.detailList = res.data[0]
	          console.log(this.detailList)
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    carList() {
	      this.$router.push({ name: 'bid-carList' })
	    },
	    bidRecord() {
	      this.$router.push({ name: 'bid-record' })
	    },
	    jumpState() {
	      this.$router.push({ name: 'bid-state' })
	    },
	    onChange() {
	      if (this.value === '') {
	        this.isDisable = true
	      } else {
	        if (this.checkedVal) {
	          this.isDisable = false
	        }
	      }
	    },
	    onFocus() {
	      this.isFocus = true
	    },
	    onBlur() {
	      this.isFocus = false
	    },
	    close() {
	      // 清除输入框值
	      this.value = ''
	      this.value === '' ? this.isDisable = true : this.isDisable = false
	    },
	    change(label) {
	      this.checkedVal = label[0]
	      if (label[0] && this.value) {
	        this.isDisable = false
	      } else if (!label[0] && this.text === '确认出价') {
	        this.isDisable = true
	      }
	    },
	    winbidPlan() {
	      this.text === '出价' ? this.text = '确认出价' : this.text = '出价'
	      if (this.text === '确认出价') {
	        // 重置输入框
	        this.value = ''
	        // 禁用
	        this.isDisable = true
	      }
	      if (this.text === '出价') {
	        this.isDisable = true
	        // this.value不可直接在data中赋值，so在这赋值
	        this.OfferPrice.bidPrice = this.value
	        BidApi.getSaveOfferInfo(this.OfferPrice).then(res => {
	          this.loadingShow = false
	          this.isDisable = false
	          console.log(res)
	          if (res.code === 0) {
	            // 成功重新调用
	            this.getDetail()
	          } else {
	            Toast({
	              message: res.message,
	              duration: 2000
	            })
	            this.loadingShow = false
	          }
	        }).catch(res => {
	          this.loadingShow = false
	          this.isDisable = false
	          Toast({
	            message: res.message || '系统繁忙，请稍候再试',
	            duration: 1500
	          })
	        })
	      }
	    },
	    countDown(timeLine) {
	      clearInterval(timer)
	      const timer = setInterval(() => {
	        // 获取当前时间
	        const date = new Date()
	        const now = date.getTime()
	        // 设置截止时间
	        const endDate = new Date(timeLine)
	        const end = endDate.getTime()
	        // 时间差
	        const leftTime = end - now
	
	        // 定义变量 d,h,m,s保存倒计时的时间
	        let d, h, m, s
	        if (leftTime >= 0) {
	          d = Math.floor(leftTime / 1000 / 60 / 60 / 24)
	          h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
	          m = Math.floor(leftTime / 1000 / 60 % 60)
	          s = Math.floor(leftTime / 1000 % 60)
	          const arr = [d, h, m, s]
	          for (let i = 0; i < arr.length; i++) {
	            if (arr[i] < 10) {
	              arr[i] = '0' + arr[i]
	            }
	          }
	          this.endTime = (d > 0 ? d + '天' : '') + (h > 0 ? d + '时' : '') + (m > 0 ? m + '分' : '') + (s + '秒')
	        } else {
	          this.endTime = ''
	        }
	      }, 1000)
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	/* common */
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.box-con{
		width: 100%;
		height: 100%;
		background: url(../../assets/image/v1/bid/bg@2x.png) center center no-repeat;
		margin-top: 46px;
	}
	.list-state{
		height: 0.3rem;
		font-size: 0.15rem;
		text-align: center;
		line-height: 0.3rem;
		color: #fff;
		background: #ff6361;
		border-radius: 0 0 0.06rem 0.06rem;
		float: right;
		margin-right: 0.16rem;
		padding:0 0.12rem;
	}
	.list-type{
		font-size: 0.17rem;
		text-align: left;
		padding-left: 0.16rem;
		color: #fff;
	}
	.list-address{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.24rem 0 0.21rem 0;
		font-size: 0.2rem;
		font-weight: bold;
		color: #fff;
	}
	.list-address img{
		width: .2rem;
		height: .3rem;
	}
	.list-con.detail-qua{
		background: #3c92fe;
	}
	.list-mark{
		height: 0.38rem;
		text-align: left;
		border-bottom: 1px solid #eaf0f5;
	}
	.list-num{
		line-height: 0.38rem;
		font-size: 0.16rem;
		color: #000000;
		font-weight: bold;
		padding-left: 0.16rem;
	}
	.list-all{
		padding: 0.16rem 0 0.16rem 0.16rem;
		font-size: 0.14rem;
		text-align: left;
	}
	.list-detail{
		padding: 0.16rem;
	}
	.list-detail .detail-remark{
		text-align: left;
		color: #f9514e;
		font-size: 0.14rem;
		font-weight: bold;
	}
	.list-detail .detail-remark span{
		font-size: 0.16rem;
	}
	.list-text.detail-time{
		color: #d5e2ff;
	}
	.list-text.detail-time:nth-child(2){
		padding-bottom: 0;
	}
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: .12rem;
		font-size: 0.14rem;
		color: #000;
	}
	.list-text:nth-child(3){
		padding-bottom: 0;
	}
	.list-jump{
		display: flex;
		align-items: center;
	}
	.list-input{
		display: flex;
		align-items: center;
	}
	.list-input .money{
		height: 0.4rem;
		line-height: 0.4rem;
		font-size: 0.25rem;
		font-weight: bold;
		padding-right: 0.05rem;
	}
	.list-input input{
		width: 85%;
		height: 0.4rem;
		font-size: 0.41rem;
		caret-color: #01a4f6;
	}
	.list-input .closeImg{
		width: 0.24rem;
		height: 0.24rem;
	}
	.price{
		padding: 0 0.16rem 0.1rem 0.16rem;
		border-bottom: 1px solid #eaf0f5;
	}
	.border-top{
		height: 0.16rem;
	}
	.custom-primary{
		width: 90%;
		color: #fff;
		font-size: 0.18rem;
		margin-top: 0.35rem;
	}
	.radioList{
		display: flex;
		align-items: center;
		margin: 0 0.16rem 0 0.16rem;
	}
	.radioList .state-text{
		text-decoration: underline;
		color: #01a4f6;
		font-size: 0.16rem;
	}
	.radioList>>>.mint-cell{
		background: none;
	}
	.radioList>>>.mint-checkbox-core{
		border-radius: 0.06rem;
	}
	.radioList>>>.mint-checklist-title{
		display: none;
	}
	.radioList>>>.mint-cell-wrapper{
		font-size:0.16rem;
		padding:0;
	}
	.radioList>>>.mint-checklist-label{
		padding-left:3px;
		padding-right:0;
	}
	/*去掉谷歌，火狐下的type="number"中的右边箭头*/
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button{
		-webkit-appearance: none;
	}
	input[type="number"]{
		-moz-appearance:textfield;
	}
</style>
